'use client';

import React, {useMemo} from 'react';
import {motion} from 'framer-motion';
import {
    CurrencyDollarIcon,
    ArrowTrendingUpIcon,
    ArrowTrendingDownIcon,
    ChartBarIcon,
} from '@heroicons/react/24/outline';
import {useAppStore} from '@/store';
import Card, {CardContent, CardHeader, CardTitle} from '@/components/ui/Card';
import {cn} from '@/utils';

const WealthDashboard: React.FC = () => {
    const {activities, currentCoins, getCoinAnalysis} = useAppStore();

    // 获取金币分析数据
    const coinAnalysis = useMemo(() => {
        return getCoinAnalysis();
    }, [activities]);

    // 计算统计数据
    const stats = useMemo(() => {
        const totalIncome = coinAnalysis.income.reduce((sum: number, item: any) => sum + item.amount, 0);
        const totalExpense = coinAnalysis.expenses.reduce((sum: number, item: any) => sum + item.amount, 0);
        const netChange = totalIncome - totalExpense;

        return {
            totalIncome,
            totalExpense,
            netChange,
            currentBalance: currentCoins
        };
    }, [coinAnalysis, currentCoins]);

    return (
        <div className="space-y-6 h-full">
            {/* 页面标题 */}
            <div className="flex-shrink-0">
                <h1 className="text-2xl font-bold text-gray-900">财富仪表盘</h1>
                <p className="text-gray-600 mt-1">查看金币收入、支出和财富变化情况</p>
            </div>

            {/* 可滚动内容区域 */}
            <div className="overflow-y-auto h-[calc(100vh-200px)]">
                {/* 统计卡片 */}
                <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
                    {/* 当前余额 */}
                    <motion.div
                        initial={{opacity: 0, y: 20}}
                        animate={{opacity: 1, y: 0}}
                        transition={{delay: 0.1}}
                    >
                        <Card className="bg-gradient-to-br from-blue-50 to-indigo-50 border-blue-200">
                            <CardContent className="p-6">
                                <div className="flex items-center justify-between">
                                    <div>
                                        <p className="text-sm font-medium text-blue-600">当前余额</p>
                                        <p className="text-2xl font-bold text-blue-900">{stats.currentBalance}</p>
                                        <p className="text-xs text-blue-600 mt-1">金币</p>
                                    </div>
                                    <CurrencyDollarIcon className="w-8 h-8 text-blue-600"/>
                                </div>
                            </CardContent>
                        </Card>
                    </motion.div>

                    {/* 总收入 */}
                    <motion.div
                        initial={{opacity: 0, y: 20}}
                        animate={{opacity: 1, y: 0}}
                        transition={{delay: 0.2}}
                    >
                        <Card className="bg-gradient-to-br from-green-50 to-emerald-50 border-green-200">
                            <CardContent className="p-6">
                                <div className="flex items-center justify-between">
                                    <div>
                                        <p className="text-sm font-medium text-green-600">总收入</p>
                                        <p className="text-2xl font-bold text-green-900">+{stats.totalIncome}</p>
                                        <p className="text-xs text-green-600 mt-1">累计获得</p>
                                    </div>
                                    <ArrowTrendingUpIcon className="w-8 h-8 text-green-600"/>
                                </div>
                            </CardContent>
                        </Card>
                    </motion.div>

                    {/* 总支出 */}
                    <motion.div
                        initial={{opacity: 0, y: 20}}
                        animate={{opacity: 1, y: 0}}
                        transition={{delay: 0.3}}
                    >
                        <Card className="bg-gradient-to-br from-red-50 to-rose-50 border-red-200">
                            <CardContent className="p-6">
                                <div className="flex items-center justify-between">
                                    <div>
                                        <p className="text-sm font-medium text-red-600">总支出</p>
                                        <p className="text-2xl font-bold text-red-900">-{stats.totalExpense}</p>
                                        <p className="text-xs text-red-600 mt-1">累计消费</p>
                                    </div>
                                    <ArrowTrendingDownIcon className="w-8 h-8 text-red-600"/>
                                </div>
                            </CardContent>
                        </Card>
                    </motion.div>

                    {/* 净变化 */}
                    <motion.div
                        initial={{opacity: 0, y: 20}}
                        animate={{opacity: 1, y: 0}}
                        transition={{delay: 0.4}}
                    >
                        <Card className={cn(
                            "border-2",
                            stats.netChange >= 0
                                ? "bg-gradient-to-br from-green-50 to-emerald-50 border-green-200"
                                : "bg-gradient-to-br from-red-50 to-rose-50 border-red-200"
                        )}>
                            <CardContent className="p-6">
                                <div className="flex items-center justify-between">
                                    <div>
                                        <p className={cn(
                                            "text-sm font-medium",
                                            stats.netChange >= 0 ? "text-green-600" : "text-red-600"
                                        )}>
                                            净变化
                                        </p>
                                        <p className={cn(
                                            "text-2xl font-bold",
                                            stats.netChange >= 0 ? "text-green-900" : "text-red-900"
                                        )}>
                                            {stats.netChange >= 0 ? '+' : ''}{stats.netChange}
                                        </p>
                                        <p className={cn(
                                            "text-xs mt-1",
                                            stats.netChange >= 0 ? "text-green-600" : "text-red-600"
                                        )}>
                                            {stats.netChange >= 0 ? '净收益' : '净损失'}
                                        </p>
                                    </div>
                                    <ChartBarIcon className={cn(
                                        "w-8 h-8",
                                        stats.netChange >= 0 ? "text-green-600" : "text-red-600"
                                    )}/>
                                </div>
                            </CardContent>
                        </Card>
                    </motion.div>
                </div>

                {/* 收入来源分析 */}
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <Card>
                        <CardHeader>
                            <CardTitle className="flex items-center gap-2">
                                <ArrowTrendingUpIcon className="w-5 h-5 text-green-600"/>
                                收入来源
                            </CardTitle>
                        </CardHeader>
                        <CardContent className="max-h-96 overflow-y-auto">
                            {coinAnalysis.income.length > 0 ? (
                                <div className="space-y-3">
                                    {coinAnalysis.income.map((item: any, index: number) => (
                                        <motion.div
                                            key={item.source}
                                            initial={{opacity: 0, x: -20}}
                                            animate={{opacity: 1, x: 0}}
                                            transition={{delay: index * 0.1}}
                                            className="flex items-center justify-between p-3 bg-green-50 rounded-lg"
                                        >
                                            <div>
                                                <span className="font-medium text-gray-900">{item.source}</span>
                                                <p className="text-sm text-gray-600">{item.count} 次记录</p>
                                            </div>
                                            <span className="text-green-600 font-semibold">+{item.amount}</span>
                                        </motion.div>
                                    ))}
                                </div>
                            ) : (
                                <div className="text-center py-8 text-gray-500">
                                    <ArrowTrendingUpIcon className="w-12 h-12 mx-auto mb-4 text-gray-300"/>
                                    <p>暂无收入记录</p>
                                </div>
                            )}
                        </CardContent>
                    </Card>

                    {/* 支出分析 */}
                    <Card>
                        <CardHeader>
                            <CardTitle className="flex items-center gap-2">
                                <ArrowTrendingDownIcon className="w-5 h-5 text-red-600"/>
                                支出分析
                            </CardTitle>
                        </CardHeader>
                        <CardContent className="max-h-96 overflow-y-auto">
                            {coinAnalysis.expenses.length > 0 ? (
                                <div className="space-y-3">
                                    {coinAnalysis.expenses.map((item: any, index: number) => (
                                        <motion.div
                                            key={item.source}
                                            initial={{opacity: 0, x: -20}}
                                            animate={{opacity: 1, x: 0}}
                                            transition={{delay: index * 0.1}}
                                            className="flex items-center justify-between p-3 bg-red-50 rounded-lg"
                                        >
                                            <div>
                                                <span className="font-medium text-gray-900">{item.source}</span>
                                                <p className="text-sm text-gray-600">{item.count} 次记录</p>
                                            </div>
                                            <span className="text-red-600 font-semibold">-{item.amount}</span>
                                        </motion.div>
                                    ))}
                                </div>
                            ) : (
                                <div className="text-center py-8 text-gray-500">
                                    <ArrowTrendingDownIcon className="w-12 h-12 mx-auto mb-4 text-gray-300"/>
                                    <p>暂无支出记录</p>
                                </div>
                            )}
                        </CardContent>
                    </Card>
                </div>
            </div>
        </div>
    );
};

export default WealthDashboard;